<template>
  <div class="app-container" ref="content">
    <div style="text-align: center;padding: 10px;font-size: 16px">{{maintenanceTaskInfo.title}}:详情信息</div>
      <div style="margin: 10px auto;text-align: center">
          <el-button type="primary" size="mini" v-if="!maintenanceTaskInfo.userName"  @click="distributionPerson()" align="center">分配人员</el-button>
          <el-button type="primary" size="mini"  @click="timeLineVisible=true" align="center">任务时间轴</el-button>
          <el-button type="primary" size="mini"  @click="updateEnd()" align="center">结束任务</el-button>
      </div>

      <el-dialog  title="维保任务时间轴"  :visible.sync="timeLineVisible">
          <el-timeline :reverse="true">
              <el-timeline-item
                      v-for="(activity, index) in maintenanceTaskInfo.inMaintenanceTaskLogVos"
                      :key="index"
                      :timestamp="activity.recordTime|dateFormat">
                  <h4>{{ activity.name }}</h4>
                  <p>{{ activity.remark }}</p>
              </el-timeline-item>
          </el-timeline>
      </el-dialog>

      <div style="width: 50%;margin:0px auto;vertical-align:middle;height:100%" v-if="show">
          <el-form :model="maintenanceTaskForm" ref="maintenanceTaskForm" label-width="150px">
              <el-form-item label="维保人员" prop="userId" >
                  <el-select v-model="maintenanceTaskForm.userId" placeholder="请选择维保人员" style="width: 100%">
                      <el-option v-for="(item,index) in userList" :key="index"  :value="item.ucId" :label="item.name"></el-option>
                  </el-select>
              </el-form-item>
              <div align="center">
                  <el-button type="primary" @click="updateUser" >确定</el-button>
              </div>
          </el-form>
      </div>
      <div style="width: 50%;margin:0px auto;vertical-align:middle;height:100%">
          <el-form :model="maintenanceTaskInfo" ref="maintenanceTaskInfo" label-width="180px">
            <el-form-item label="标题:" prop="title">
              {{ maintenanceTaskInfo.title }}
            </el-form-item>
            <el-form-item label="安全企业:" prop="enterpriseName">
              {{ maintenanceTaskInfo.enterpriseName }}
            </el-form-item>
            <el-form-item label="维保企业:" prop="maintenaceEnterpriseName">
              {{ maintenanceTaskInfo.maintenaceEnterpriseName }}
            </el-form-item>
            <el-form-item label="维保人员:" prop="userName" v-if="maintenanceTaskInfo.userName">
              {{ maintenanceTaskInfo.userName }}
            </el-form-item>
            <el-form-item label="需要巡检设备数量:" prop="checkedNum" v-if="maintenanceTaskInfo.checkedNum">
              {{ maintenanceTaskInfo.checkedNum }}
            </el-form-item>
            <el-form-item label="已完成巡检的数量:" prop="completeNum" v-if="maintenanceTaskInfo.completeNum">
              {{ maintenanceTaskInfo.completeNum }}
            </el-form-item>
            <el-form-item label="执行时间:" prop="executeMouth">
              {{ maintenanceTaskInfo.executeMouth }}
            </el-form-item>
            <el-form-item label="任务状态:" prop="status">
              {{ maintenanceTaskInfo.status | maintenanceTaskStatus }}
            </el-form-item>
            <el-form-item label="开始时间:"  v-if="maintenanceTaskInfo.startExecuteTime" prop="startExecuteTime">
              {{ maintenanceTaskInfo.startExecuteTime | dateFormat }}
            </el-form-item>
            <el-form-item label="结束时间:"  v-if="maintenanceTaskInfo.endTime" prop="endTime">
              {{ maintenanceTaskInfo.endTime | dateFormat }}
            </el-form-item>
          </el-form>
      </div>
          <uc-table url="admin/mainInfoData/getQuarterMaintenanceEquPage" name="设备" ref="equipmentTable" pageable table-border
                    :search-form="searchForm" @selection-change="handleSelectionChange" row-key="ucId">
            <template slot="searchForm">
              <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline filter-container">
                <!--搜索输入框-->
                <el-form-item>
                  <el-input type="text" v-model="searchForm.name" placeholder="请输入设备名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="searchForm.status" placeholder="请选择检测状态" style="width: 100%" clearable
                             @clear="clearInput3()">
                    <el-option
                        v-for="dict in equipMainStatus"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
                <!--搜索按钮--新增按钮-->
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" class="filter-item" @click="handleSearch()">查询</el-button>
                  <el-button type="primary" icon="el-icon-search" class="filter-item" @click="batchSign(checked)">批量标记
                  </el-button>
                </el-form-item>
              </el-form>
            </template>
            <template slot="columns">
              <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
              <el-table-column prop="name" label="设备名称" align="left"></el-table-column>
              <el-table-column prop="type" label="设备类型" align="left"></el-table-column>
              <el-table-column prop="code" label="设备编码" align="left"></el-table-column>
              <el-table-column prop="address" label="设备地址" align="left" show-overflow-tooltip></el-table-column>
              <el-table-column prop="status" label="检测状态" align="left" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{statusFormat(scope.row.status)}}
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" width="240" align="left" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.isvideo == '10'" size="mini" :disabled="scope.row.videoUrl==null" icon="el-icon-edit" type="primary" @click="handleVideo(scope.row)">查看视频</el-button>
                  <!--编辑按钮-->
                  <el-button size="mini" icon="el-icon-info" type="success" @click="handleInfo(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </template>
          </uc-table>
        <el-dialog title="巡检视频" :visible.sync="videoDialogVisible" width="60%">
          <video :src="videoUrl"  controls="controls" autoplay width="100%" height="450px"></video>
        </el-dialog>
        </div>
</template>

<script>
import {getInMaintenanceInfoVo, batchSign, updateMaintenanceTaskAndFeedback,updateEnd} from "@/api/maintenanceRecord";
import UcTable from "@/components/UcTable/index.vue";
import {getInUserList} from "@/api/enterprise";

export default {
  name: "maintenanceTaskInfo",
  components: {UcTable},
  data() {
    return {
      searchForm: {
        deleted:false,
        maintenanceId: this.$route.query.ucId
      },
      show:false,
      maintenanceTaskInfo: {

      },
      maintenanceTaskForm:{

      },
      videoUrl: "",
      videoDialogVisible: false,
      checked: [],
      equipmentTypeData: [],
      equipmentUcIds: [],
      equipMainStatus: [],
      userList: [],
      timeLineVisible:false
    }
  },
  created() {
    this.$nextTick(() => {
      this.getInMaintenanceInfoVo()
    });

    this.getDicts("equip_main_status").then(response => {
      this.equipMainStatus = response.data.data;
    });
  },
  methods: {
    handleVideo (val){
      this.videoUrl = val.videoUrl
      this.videoDialogVisible = true
    },
    statusFormat(data, column) {
      return this.selectDictLabel(this.equipMainStatus, data);
    },
    getInUserList(val){
        getInUserList({deleted:false,flagId:val}).then(res=>{
            this.userList = res.data
        }).catch(error=>{

        })
    },
    distributionPerson(){
          this.show=true
    },
    updateEnd(){
      updateEnd({ucId: this.$route.query.ucId}).then(res => {
      }).catch(error=>{

      })
    },
    cancelMaintenanceTask(){
        window.history.back()
    },
    updateUser(){
        updateMaintenanceTaskAndFeedback(this.maintenanceTaskForm).then(res => {
            this.$notify.success({
                title: '成功',
                message: "分配人员成功"
            })
          this.cancelMaintenanceTask()
        }).catch(res => {
            this.$notify.error({
                title: '失败',
                message: res.msg
            })
        })
    },
    clearInput1(){
        //清楚企业下拉框
        this.searchForm.enterpriseId = null
        this.handleSearch()
    },
    clearInput3(){
        this.searchForm.status=null
        this.handleSearch()
    },
    handleSearch() {
      this.$refs.equipmentTable.getTableData(1)
    },
    handleInfo(val) {
      this.$router.push("/equipment/equipmentInfo/" + val.equipmentId)
    },
    handleSelectionChange(val) {
      console.log("handleSelectionChange" + val)
      this.checked = val
      console.log("checked" + this.checked)
    },
    batchSign(rows) {
      rows.forEach(element => {
        console.log(element)
        console.log(element.ucId)
        this.equipmentUcIds.push(element.ucId)
        console.log(this.equipmentUcIds)
      })
      batchSign({ucId: this.$route.query.ucId, equipmentUcIds: this.equipmentUcIds}).then(res => {
        this.handleSearch()

        console.log(res)
      }).catch(error => {
        console.log(error)
      })
    },
    getInMaintenanceInfoVo() {
      let loadingInstance = this.$loading({
        target: this.$refs.content,
        text: '数据加载中'
      });
      getInMaintenanceInfoVo({ucId: this.$route.query.ucId}).then(res => {
        console.log(res)
          this.maintenanceTaskInfo = res.data
          this.maintenanceTaskForm.ucId=res.data.ucId
          if (this.maintenanceTaskInfo.userId==null){
              this.getInUserList(this.maintenanceTaskInfo.maintenaceEnterpriseId)
          }
          loadingInstance.close()
        this.$notify.success({
          title: '成功',
          message: "获取维保任务成功"
        })

      }).catch(error => {
        console.log(error)
        loadingInstance.close()
        this.$notify.error({
          title: '失败',
          message: "获取维保任务失败"
        })
      })
    },
  }

}
</script>

<style>

</style>
